<!-- Album.vue -->
<template>
  <div style="overflow: auto; height: 100%">
    <div style="margin-left: 20px">
      <span>智慧相册</span>
      <el-divider direction="vertical"></el-divider>
      <span>自动分类</span>
      <el-divider direction="vertical"></el-divider>
    </div>
    <div class="album">
      <div v-for="(item, index) in backgrounds" :key="index">
        <Category :background="item" :category="categories[index]"> </Category>
      </div>
    </div>
    <div style="margin-left: 20px">
      <span>精彩时刻</span>
      <el-divider direction="vertical"></el-divider>
      <span>自动生成</span>
      <el-divider direction="vertical"></el-divider>
    </div>
    <div class="album">
      <div v-for="(item, index) in moments" :key="index">
        <MomentCard :background="item" :themename="themenames[index]">
        </MomentCard>
      </div>
    </div>
  </div>
</template>

<script>
import Category from "../components/Category";
import MomentCard from "../components/MomentCard.vue";
import { BASE_URL } from "../config";
// import SpecialMoment from "../components/SpecialMoment"
export default {
  data() {
    return {
      categories: [
        ["animal", "动物"],
        ["building", "建筑"],
        ["people", "人物"],
        ["scenery", "风景"],
        ["vehicle", "交通工具"],
      ],
      test: [
        [
          "https://z3.ax1x.com/2021/05/01/gVgbJ1.jpg",
          "https://z3.ax1x.com/2021/05/01/gVgHiR.jpg",
          "https://z3.ax1x.com/2021/05/01/gVgodJ.jpg",
          "https://z3.ax1x.com/2021/05/01/gVgTo9.jpg",
        ],
        [
          "https://z3.ax1x.com/2021/05/01/gV2dYR.jpg",
          "https://z3.ax1x.com/2021/05/01/gV2wf1.png",
          "https://z3.ax1x.com/2021/05/01/gV2BSx.png",
          "https://z3.ax1x.com/2021/05/01/gV2ak9.jpg",
        ],
        [
          "https://z3.ax1x.com/2021/05/01/gV2NTJ.jpg",
          "https://z3.ax1x.com/2021/05/01/gV2Dl6.jpg",
          "https://z3.ax1x.com/2021/05/01/gV2r6K.png",
          "https://z3.ax1x.com/2021/05/01/gVgHiR.jpg",
        ],
        [
          "https://z3.ax1x.com/2021/05/01/gV2wf1.png",
          "https://z3.ax1x.com/2021/05/01/gV2dYR.jpg",
          "https://z3.ax1x.com/2021/05/01/gVgHiR.jpg",
          "https://z3.ax1x.com/2021/05/01/gV2wf1.png",
        ],
      ],
      backgrounds: [[], [], [], [], []],
      moments: [],
      themenames: [],
    };
  },
  components: {
    Category,
    MomentCard,
  },
  async beforeMount() {
    //let res = await this.$get("/pic.json")
    console.log("album界面");
    let res = await this.$get("/imgcenter/displayByAllType");
    if (res.success == true) {
      let map = res.data.imageMap;
      // console.log(map.people[0].imagePath)
      // for(var i = 0;i<this.categories.length();i++){

      //   this.categories[i].push()
      // }
      let index = 0;
      this.backgrounds = [[], [], [], [], []];
      let keys = Object.keys(map).sort();
      for (var key of keys) {
        for (var item of map[key.toString()]) {
          this.backgrounds[index].push(BASE_URL + "/" + item["url"]);
        }
        ++index;
      }
    }
  },
  mounted() {
    this.getSpecialMomentInfo();
  },
  methods: {
    async getSpecialMomentInfo() {
      console.log("getSpecialMomentInfo");
      let res = await this.$get("/imgcenter/specialMoment");
      console.log(res.data);
      let obj = res.data.specialTime;
      for (var key in obj) {
        let temp = [];
        this.themenames.push(key.toString());
        for (var item of obj[key]) {
          temp.push(BASE_URL + "/" + item);
        }
        this.moments.push(temp);
      }
      console.log(this.themenames);
      console.log(this.moments);
    },
  },
  //mounted时DOM渲染完成，进行绑定
};
</script>

<style  scoped>
.album {
  display: flex;
  flex-flow: row wrap;
  margin: 5px 10px;
  padding: 20px 1px 1px 1px;
  background: whitesmoke;
}
/* 相册组件必须设定宽度和高度 */
.gallery {
  width: 400px;
  height: 400px;
}
</style>